<template>
    <h2 class="title">发布职位</h2>
    <div class="company-info">
        <n-grid :cols="24" :x-gap="24" :y-gap="40">
            <n-gi :span="24">
                <p class="label">职位名称</p>
                <n-input v-model:value="job.name" placeholder="例：web前端开发工程师..." />
            </n-gi>

            <n-gi :span="24">
                <p class="label">工作职责</p>
                <n-dynamic-input v-model:value="job.duty" show-sort-button placeholder="请输入" />
            </n-gi>

            <n-gi :span="24">
                <p class="label">职位要求</p>
                <n-dynamic-input v-model:value="job.requirements" show-sort-button placeholder="请输入" />
            </n-gi>

            <n-gi :span="12">
                <p class="label">薪资范围</p>
                <n-input v-model:value="job.salary" pair separator="-" passively-activated />
            </n-gi>

            <n-gi :span="12">
                <p class="label">职位类型</p>
                <n-select v-model:value="job.type" :options="jobTypeOptions" clearable />
            </n-gi>

            <n-gi :span="12">
                <p class="label">工作经验</p>
                <n-select v-model:value="job.experience" :options="experienceOptions" clearable />
            </n-gi>

            <n-gi :span="12">
                <p class="label">学历</p>
                <n-select v-model:value="job.education" :options="educationOptions" clearable />
            </n-gi>

            <n-gi :span="12">
                <p class="label">职位标签</p>
                <n-select v-model:value="job.tag" filterable placeholder="职位标签" :render-tag="renderTag"
                    :options="tagOptions" multiple />
            </n-gi>

            <n-gi :span="12">
                <p class="label">城市</p>
                <n-input v-model:value="job.city" placeholder="所在城市" />
            </n-gi>

            <n-gi :span="12">
                <p class="label">具体地址</p>
                <n-input v-model:value="job.address" placeholder="具体地址" />
            </n-gi>
        </n-grid>
    </div>
    <n-button type="success" @click="publish">
        发布
    </n-button>
    <n-button type="info" @click="backCompany" class="back">
        返回公司页
    </n-button>
</template>

<script setup>
import { h, ref, reactive, onMounted } from "vue";
import { getJobTypeListAPI, getEducationListAPI, getExperienceListAPI, getTagListAPI, publishJobAPI } from "@/http/api/job.js";
import { useRoute, useRouter } from "vue-router";
import { NTag } from "naive-ui";

const route = useRoute();
const router = useRouter();
const jobTypeOptions = ref([]);
const educationOptions = ref([]);
const experienceOptions = ref([]);
const tagOptions = ref([]);


const job = reactive({
    companyId: route.params.id,
    name: '',
    duty: [],
    requirements: [],
    salary: '',
    type: '',
    experience: '',
    education: '',
    city: '',
    address: ''
})

const renderTag = ({ option, handleClose }) => {
    return h(NTag, {
        type: option.type,
        closable: true,
        onClose: (e) => {
            e.stopPropagation();
            handleClose();
        }
    }, { default: () => option.label });
};

// 发布职位
function publish() {
    // 处理job数据，将数组值换为字符串
    for (const key in job) {
        if (Object.hasOwnProperty.call(job, key)) {
            if (job[key] instanceof Array) {
                job[key] = JSON.stringify(job[key])
            }
        }
    }
    publishJobAPI(job).then(res => {
        if (res) {
            // 重置数据
            job.name = job.salary = job.type = job.experience = job.education = job.city = job.address = '';
            job.duty = job.requirements = []
        }
    })
}

// 获取职位列表初始化数据
function getJobTypeList() {
    getJobTypeListAPI().then(res => {
        jobTypeOptions.value = res.result.map(r => {
            return { 'label': r.type, 'value': r.id };
        })
    })
}

// 获取学历要求初始化数据
function getEducationList() {
    getEducationListAPI().then(res => {
        educationOptions.value = res.result.map(r => {
            return { 'label': r.type, 'value': r.id };
        })
    })
}

// 获取经验要求初始化数据
function getExperienceList() {
    getExperienceListAPI().then(res => {
        experienceOptions.value = res.result.map(r => {
            return { 'label': r.type, 'value': r.id };
        })
    })
}

// 获取标签初始化数据
function getTagList() {
    getTagListAPI().then(res => {
        tagOptions.value = res.result.map(r => {
            return { 'label': r.type, 'value': r.id, 'type': r.color };
        })
    })
}

function backCompany(){
    router.back()
}

onMounted(() => {
    getJobTypeList();
    getEducationList();
    getExperienceList();
    getTagList();
})

</script>
<style lang="scss" scoped>
.title {
    font-size: 26px;
    font-weight: bold;
}

.company-info {
    margin: 20px 0px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;

    .label {
        padding: 10px 0px;
    }

    .n-select {
        ::v-deep(.n-base-selection-label) {
            height: 50px;
        }
    }

    .n-dynamic-input {
        ::v-deep(.n-button) {
            height: 50px;
        }
    }

    ::v-deep(.n-input) {
        line-height: 3.5;

        ::v-deep(.n-input__input-el) {
            height: 50px;
        }
    }

    ::v-deep(.n-base-selection-tags) {
        height: 50px;
    }
}
.back{
    margin-left: 20px;
}
</style>